<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">
	<title>我的红包</title>
	<link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/myred.css" />
    <link rel="stylesheet" href="../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="../assets/swiper/css/swiper.css" />
    
	<script src="../assets/jquery/jquery-3.2.1.min.js"></script>
	<script src="../assets/flexible/flexible.debug.js"></script>
</head>
<body>
	
	<!--header-->
	<header class="header">
		<a href="wallet.html" class="iconfont icon-fanhui left" style="font-size: 32px; color: white;"></a>
		<h3>我的红包</h3>
		<a class="right" href="instruct.html"><i class="iconfont icon-shuoming" style="color: white; font-size: 16px;"></i>红包说明</a>
	</header>
    <!-- banner -->
    <ul class="exchange">
    	<li><a><img src="../images/2_3.png"/>兑换红包</a></li>
    	<li><a href="reward.html"><img src="../images/2_4.png"/>推荐有奖</a></li>
    </ul>
    <!-- xx快报 -->
    <nav class="nav">
    	<ul>
    		<li class="lis on">可使用</li>
    		<li class="lis">已使用</li>
    		<li class="lis">已过期</li>
    	</ul>
    </nav>
    
    <!-- 热卖商品 -->
    <div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide one" >
		        	<p>你有3个红包即将过期</p>
                    <ul class="box">
                    	<li class="left">
                    		10元
                    	</li>
                    	<li class="right">
                    		<h2>首单红包</h2>
                    		<ul>
                    			<li>-无消费限制可任意使用</li>
                    			<li>-专享服务：ETC充值</li>
                    			<li>-2017-9-1至2016-9-30</li>
                    		</ul>
                    	</li>	
                    </ul>
                    <ul class="box">
                    	<li class="left">
                    		10元
                    	</li>
                    	<li class="right">
                    		<h2>首单红包</h2>
                    		<ul>
                    			<li>-无消费限制可任意使用</li>
                    			<li>-专享服务：ETC充值</li>
                    			<li>-2017-10-1至2016-10-30</li>
                    		</ul>
                    	</li>	
                    </ul>
                    <ul class="box">
                    	<li class="left">
                    		10元
                    	</li>
                    	<li class="right">
                    		<h2>首单红包</h2>
                    		<ul>
                    			<li>-无消费限制可任意使用</li>
                    			<li>-专享服务：ETC充值</li>
                    			<li>-2017-11-1至2016-11-30</li>
                    		</ul>
                    	</li>	
                    </ul>
		        </div>
		        <div class="swiper-slide two">
	                <p>你有1个红包已经使用</p>
                    <ul class="box">
                    	<li class="left">
                    		10元
                    	</li>
                    	<li class="right">
                    		<h2>首单红包</h2>
                    		<ul>
                    			<li>-无消费限制可任意使用</li>
                    			<li>-专享服务：ETC充值</li>
                    			<li>-2017-9-1至2016-9-30</li>
                    		</ul>
                    		<p>已使用<p>
                    	</li>	
                   
                    </ul>	        	
		        </div>
		        <div class="swiper-slide three">
		        	<p>你有1个红包已经过期</p>
                    <ul class="box">
                    	<li class="left">
                    		10元
                    	</li>
                    	<li class="right">
                    		<h2>首单红包</h2>
                    		<ul>
                    			<li>-无消费限制可任意使用</li>
                    			<li>-专享服务：ETC充值</li>
                    			<li>-2017-9-1至2016-9-30</li>
                    		</ul>
                    		<p>已过期<p>
                    	</li>	
                   
                    </ul>
		        	
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		    <!-- 如果需要导航按钮 -->
		    <!--<div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>-->
		    
		    <!-- 如果需要滚动条 -->
		    <!--<div class="swiper-scrollbar"></div>-->
		</div>
    <!-- 新品上市 -->
    
    <!-- 当前用户、回顶部 -->
    
    <!-- 底部导航 -->
    
	
	<script type="text/javascript" src="../assets/iconfont/iconfont.js" ></script>
	<script type="text/javascript" src="../assets/swiper/js/swiper.jquery.min.js"></script>
	<script language="javascript"> 
		var mySwiper = new Swiper('.swiper-container', {
	        onTransitionEnd: function(swiper){
	            $('.lis').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
	        }
	    })

	    $('.lis').click(function(){
	        $(this).addClass('on').siblings().removeClass('on');
	        mySwiper.slideTo($(this).index(), 1000);
	  
	    });
	</script>
</body>
</html>
